<style>
.searchInput {
    position: relative;
    height: calc(100% - 10px);
    display: flex;
    align-items: center;
    margin: 5px;
    background: #ffffff;
    border-radius: 5px;
    border: rgba(226, 228, 230, 0.8) solid 1px;
    z-index: 9999;
    .searchIcon {
        height: 100%;
        flex: 0 0 auto;

        img {
            margin: 10px;
            height: calc(100% - 20px);
        }
    }

    .inputArea {
        height: 100%;
        flex: 1 1 auto;

        input {
            margin: 10px 0;
            height: calc(100% - 20px);
            border: none;
            outline: none;
        }
    }

    .searchButton {
        height: 100%;
        flex: 0 0 auto;

        button {
            margin: 5px;
            padding: 0 10px;
            border-radius: 5px;
            height: calc(100% - 10px);
            background: #69c2ec;
            border: none;
        }
    }

    .popup {
        width: 100%;
        position: absolute;
        top: 100%;
        background: #ffffff;
        border: #e3e5e7 solid 1px;
        padding: 10px;

        .search_history {
            .search_history_title {
                margin: 5px 0;
                font-size: 14px;
                font-weight: bold;
            }

            .search_history_content {
                .search_history_content_item {
                    position: relative;
                    display: inline-block;
                    padding: 5px;
                    margin: 5px;
                    border-radius: 5px;
                    background: #f6f7f8;
                    color: #18191c;

                    .delete_record {
                        display: none;
                        position: absolute;
                        right: 0;
                        top: 0;
                        height: 12px;
                        width: 12px;
                        color: #ffffff;
                        /* padding: 5px; */
                        border-radius: 10px;
                        background: #aaa;

                        img {
                            border-radius: 10px;
                            height: 10px;
                            width: 10px;
                        }
                    }
                }

                .search_history_content_item:hover {
                    color: #4eabe6;
                }

                .search_history_content_item:hover .delete_record {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

        }

        .trend {
            .trend_title {
                margin: 5px 0;
                font-size: 14px;
                font-weight: bold;
                color: red;
            }
            .trend_content {
                .hot_search_content_item {
                    position: relative;
                    display: flex;
                    border-bottom: #aaa 1px solid;
                }
                .hot_search_content_item :hover {
                    background: #e3e5e7;
                }
                .hot_search_content_item p {
                    padding: 5px 10px;
                }
                .hot_search_content_item .c_trend {
                    flex: 1 1 auto;
                    text-align: left;
                }
            }
        }

        .associate {
            .associate_title {}

            .associate_content {
                .associate_content_item {
                    padding: 8px;
                    transition: font-size 0.3s ease;
                }

                .associate_content_item:hover {
                    background: #e3e5e7;
                    font-size: 20px;
                }
            }
        }
    }
}
</style>
<template>
    <div>
        <div class="searchInput">
            <div class="searchIcon" ref="searchInput1">
                <img src="../assets/image/search.png" alt="">
            </div>
            <div class="inputArea" ref="searchInput2">
                <input type="text" placeholder="输入关键词搜索" v-model="inputValue" @keyup.enter="toSearchPage(inputValue)">
            </div>
            <div class="searchButton">
                <button @click="toSearchPage(inputValue)">
                    搜索
                </button>
            </div>
            <div class="popup" v-show="isPopupVisible == 1" ref="popup1">
                <div class="search_history">
                    <div class="search_history_title">搜索历史</div>
                    <div class="search_history_content">
                        <div class="search_history_content_item" v-for="(item, index) in searchHistoryData"
                            :key="index">
                            <p @click="changeInputContent(item.record)">{{ item.record }}</p>
                            <div class="delete_record">
                                <img src="@/assets/image/close.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="trend">
                    <div class="trend_title">热门搜索</div>
                    <div class="trend_content">
                        <div class="hot_search_content_item" v-for="(item, index) in HotSearchData"
                            :key="index">
                            <p>{{ index + 1 }}</p>
                            <p class="c_trend" @click="changeInputContent(item.trend)">{{ item.trend }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup" v-if="isPopupVisible == 2" ref="popup2">
                <div class="associate search_history">
                    <div class="associate_title search_history_title">猜你想搜</div>
                    <div class="associate_content">
                        <div class="associate_content_item" v-for="(item, index) in associateData" :key="index">
                            <p @click="toSearchPage(inputValue)">{{
                    item.associateContent }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { newPage } from '@/utils/commonFunction'
import request from '@/utils/request'
export default {
    name: 'SearchInput2',
    props: {
        inputValue: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            isPopupVisible: 0,
            searchHistoryData: [
                {
                    record: 'chatgpt',
                    id: 1
                },
                {
                    record: 'gpt',
                    id: 2
                },
            ],
            HotSearchData:[
                {
                    trend: 'chatgpt',
                    id: 1
                }
            ],
            associateData: [
            ]
        }
    },
    mounted() {
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },
    created() {
        this.getSearchHistoryData();
        this.getHotSearchData();
    },
    watch: {
        inputValue(newValue) {
            if (newValue.length > 0) {
                this.isPopupVisible = 2;
            } else {
                this.isPopupVisible = 1;
            }
            this.generateSearchSuggest(newValue);
        }
    },

    methods: {
        newPage,
        toSearchPage(searchContent) {
            if (searchContent == null || searchContent == '' || searchContent == undefined) {
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                });

            } else {
                this.newPage('/searchPost', { searchContent: searchContent });
                this.isPopupVisible = 0;
            }
        },
        showPopup() {
            this.isPopupVisible = 1;
        },
        hidePopup() {
            this.isPopupVisible = 0;
        },
        changeInputContent(content) {
            this.inputValue = content
        },
        handleClickOutside(event) {
            const searchInput1 = this.$refs.searchInput1;
            const searchInput2 = this.$refs.searchInput2;
            const popup1 = this.$refs.popup1;
            const popup2 = this.$refs.popup2;

            if (
                (searchInput1 && searchInput1.contains(event.target)) ||
                (searchInput2 && searchInput2.contains(event.target))
            ) {
                if (this.inputValue.length > 0) {
                    this.isPopupVisible = 2;
                } else {
                    this.isPopupVisible = 1;
                }
            } else if (
                (popup1 && popup1.contains(event.target)) ||
                (popup2 && popup2.contains(event.target))
            ) {
                if (this.inputValue.length > 0) {
                    this.isPopupVisible = 2;
                } else {
                    this.isPopupVisible = 1;
                }
            } else {
                this.isPopupVisible = 0;
            }
        },
        generateSearchSuggest(searchContent) {
            request.get('/posts/search_suggest', {
                params: {
                    searchContent: searchContent
                }
            }).then(res => {
                this.associateData = res.data.map(item => {
                    return {
                        associateContent: item
                    }
                })
            })
        },
        getSearchHistoryData() {
            let jsonString = localStorage.getItem('userInfo');
            let userId = JSON.parse(jsonString).id;
            request.get(`/userSearchRemember/getByUserId/${userId}`).then(res => {
                this.searchHistoryData = res.data.map(item => {
                    return {
                        record: item.searchContent,
                        id: item.id
                    }
                })
            })
        },
        getHotSearchData(){
            request.get(`/userSearchRemember/getHotSearch`).then(res => {
                console.log(res.data);
                this.HotSearchData = res.data.map(item => {
                    return {
                        trend: item.searchContent,
                        id: item.searchCount
                    }
                })
            })
            
        }

    },
}
</script>